<html>

<head>
    <title>Three.js案例-画线</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r99/three.js"></script>
    <script src="./js/webgl.js"></script>
    <script>
        /* 兼容性检测 */

        if (WebGL.isWebGLAvailable()) {
            // Initiate function or other initializations here
            animate();
        } else {
            const warning = WebGL.getWebGLErrorMessage();
            document.body.appendChild(warning);
        }


        function animate() {
            //1. 创建场景
            const scene = new THREE.Scene();

            // 创建渲染器
            const renderer = new THREE.WebGLRenderer();
            // 渲染器的尺寸   window.innerWidth/2
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
            // 创建相机 
            /*
                PerspectiveCamera 透视相机
                视野角度（FOV）
                长宽比（aspect ratio）
                近截面（near）
                远截面（far）
             */
            const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
            camera.position.set(0, 0, 100);
            camera.lookAt(0, 0, 0);

            // 材质 - 线
            const material = new THREE.LineBasicMaterial({ color: '#7bc133' });
            const points = [];
            // Vector3(x ,y, z)
            // 字母 N
            points.push(new THREE.Vector3(- 10, 20, 0));
            points.push(new THREE.Vector3(- 10, 0, 0));
            points.push(new THREE.Vector3(0, 20, 0));
            points.push(new THREE.Vector3(0, 0, 0));
            const geometry = new THREE.BufferGeometry()
            geometry.setFromPoints(points);
            const line = new THREE.Line(geometry, material);
            scene.add(line);
            renderer.render(scene, camera);
        }
    </script>
</body>

</html>